<template>
  <div class="m-upload">
    <el-upload
      class="upload-demo"
      action="/admin/finance/api/upload_image.php"
      accept="image/jpeg,image/gif,image/png"
      :on-preview="handlePictureCardPreview"
      :on-remove="refundRemove"
      :before-remove="handleRemove"
      multiple
      :file-list="parcel"
      :on-success="handleAvatarSuccess"
      list-type="picture-card">
      <i class="el-icon-plus"></i>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10Mb</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "insertImage",
        props:['parcel','ind'],
      data(){
        return{
          dialogVisible:false,
          dialogImageUrl:''
        }
      },
        methods:{
          handleRemove(file, fileList){
            return new Promise((resolve, reject)=>{
              this.$confirm('是否确定删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                resolve()
              }).catch(() => {
                reject()
              });
            })
          },
          refundRemove(file, fileList){
            this.$emit('upload',fileList,this.ind);
          },
          handlePictureCardPreview(file){
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
          },
          handleAvatarSuccess(response, file, fileList){
            this.$emit('upload',fileList,this.ind);
            console.log(fileList,this.ind)

          }
        }
    }
</script>

<style scoped>

</style>
